CSS [attribute~=”value”] Selector
The [attribute~=”value”] Selector selector is used to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Attribute selector</title>
<style>
[class~="gfg"] {
color: green;
font-size: 40px;
font-weight: bold;
text-align: center;
}
[class~="geeks"] {
font-size: 17px;
text-align: center;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div Class="geeks">A computer science portal for geeks
</div>
<div class="geeks ide">
w3wiki is coding platform
</div>
</body>
</html>
Output:
CSS Attribute Selector
The CSS Attribute Selector allows you to target elements based on their specific attributes or attribute values. This selector enhances the precision and efficiency of your CSS, enabling you to apply styles to elements that share common attributes. By leveraging attribute selectors, you can maintain a more organized and scalable CSS codebase. In this article, we will explore the various types of CSS Attribute Selectors, their syntax, and practical examples to demonstrate their usage.